<template>
    <div class="common-layout" >
        <el-container>
            <el-header style="background-color: aqua;text-align: center;">
                <p  style="font-weight: 800;line-height: 60px;" >欢迎您：{{  User}} <el-button round type="info" style="float: right;margin-top: 15px;" @click="Quit()" :icon="Close">退出</el-button></p>
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: #545c64;">

                    <p style="font-size: 25px;color: white;text-align: center;">ERP系统</p>

                    <el-menu
                        active-text-color="#ffd04b"
                        background-color="#545c64"
                        class="el-menu-vertical-demo"
                        default-active="2"
                        text-color="#fff"
                        @open="handleOpen"
                        @close="handleClose"     
                    >
                        <template v-for="(item, index) in Menu">
                            <el-sub-menu v-if="item.children" :key="item.value" :index="String(item.value)">
                                <!-- 父级 ：RBAC管理 -->
                                <template #title>
                                    <span>{{ item.label }}</span>
                                </template>
                                <template v-for="(subItem, subIndex) in item.children">
                                    <!-- 产品管理 -->
                                    <el-sub-menu v-if="subItem.children" :key="subItem.value" :index="String(subItem.value)">
                                        <template #title>
                                            <span>{{ subItem.label }}</span>
                                        </template>
                                        <!-- 产品添加 -->
                                        <el-menu-item v-for="(subSubItem, subSubIndex) in subItem.children" :key="subSubItem.value"
                                            :index="String(subSubItem.value)" @click="navigateTo(subSubItem.menu_url)">
                                            <span>{{ subSubItem.label }}</span>
                                        </el-menu-item>
                                    </el-sub-menu>
                                    <!-- 角色添加等 -->
                                    <el-menu-item v-if="!subItem.children" :key="subItem.value" :index="String(subItem.value)" @click="navigateTo(subItem.menu_url)">
                                        <span>{{ subItem.label }}</span>
                                    </el-menu-item>
                                </template>
                            </el-sub-menu>
                            <el-menu-item v-if="!item.children" :key="item.value" :index="String(item.value)" @click="navigateTo(item.menu_url)">
                                <span>{{ item.label }}</span>
                            </el-menu-item>
                        </template>

                    </el-menu>
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
    
<script setup lang='ts'>
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  Check,
  Delete,
  Edit,
  Close,
  Search,
  Star,
} from '@element-plus/icons-vue'
const route = useRoute();
const router = useRouter();
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import http from '../http.js'
const handleOpen = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
}

onMounted(() => {
    GetMenus();//显示左侧菜单
    GetUser();//显示用户信息
})

//显示左侧菜单
const Menu = ref([])
const openedMenuIndexes=ref([])
const GetMenus = () => {
    axios.get(http.RBACdu+'/api/Menu/MenuTreeShowByRoleId')
    .then(res => {
        Menu.value = res.data.data    
        // res.data.data.forEach(element => {
        //     if (element.children) {
        //         openedMenuIndexes.value.push(element.value);
        //         // console.log(openedMenuIndexes.value);
        //         element.children.forEach((subItem) => {
        //             if (subItem.children) {
        //                 openedMenuIndexes.value.push(subItem.value);
        //             }
        //         });
        //     }
        //     console.log(openedMenuIndexes.value)
        // });
        // console.log(res.data.data)    
    })
    .catch(err => {
        console.log(err)    
    })
}

//跳转路径
const navigateTo = (routePath: any) => {
    router.push(routePath)
}


//显示用户信息
const User = ref([])
const GetUser = () => {
    axios.get(http.zblnb+'/erpcp/api/Product/UserName')
    .then(res => {
        User.value = res.data
        localStorage.setItem("UserName",res.data)
    })
    .catch(err => {
        console.log(err)   
    })
}



 
    const activeIndex = ref('');
 
    const handleMenuSelect = (index) => {
      activeIndex.value = index;
      console.log('Selected menu:', index);
    };



const Quit = () => {
    ElMessageBox.confirm(
    '你确定要退出吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        router.push('/')
        localStorage.removeItem("ToKen")
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '关闭退出',
      })
    })
}






</script>
    
<style>
    .el-header{
        background: green;
    }
    .el-aside{
        background-color:#545c64;
        min-height: calc(100vh - 60px);
    }
</style>